<div class="header p-20" fxLayout="column" fxLayoutAlign="space-between start">
  <div class="todo-logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
    <mat-icon class="mat-18 todo-logo-icon">check_box</mat-icon>
    <span class="todo-logo-text">Todo</span>
  </div>
</div>

<div fxLayout="column">
  <button mat-raised-button class="todo-add-button">添加任务</button>

  <mat-nav-list class="nav-list">
    <mat-list-item class="nav-list-item active">
      <mat-icon mat-list-icon>view_headline</mat-icon>
      <h4 mat-line>全部</h4>
    </mat-list-item>
    <mat-list-item class="nav-list-item">
      <mat-icon mat-list-icon>schedule</mat-icon>
      <h4 mat-line>未完成</h4>
    </mat-list-item>
    <mat-list-item class="nav-list-item">
      <mat-icon mat-list-icon>check</mat-icon>
      <h4 mat-line>已完成</h4>
    </mat-list-item>
  </mat-nav-list>

</div>